<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/jquery-1.12.4.js"></script>
    <script src="../libs/echarts.js"></script>
    <style>
        #box {
            width: 450px;
            height: 450px;
            padding: 10px 8px 0;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        $(function () {
            let myCharts = echarts.init($('#box')[0])
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br />{b} : {c} ({d}%)'
                    // {a}代表图表名称,{b}代表数据的名称,{c}代表数据对应的value值,({d}%)代表当前数据的value除以所有数据的value之和
                },
                legend: {
                    left: 'center',
                    top: 'bottom',
                    data: [
                        'rose1',
                        'rose2',
                        'rose3',
                        'rose4',
                        'rose5',
                        'rose6',
                        'rose7',
                        'rose8'
                    ]
                },
                series: [{
                    name: 'Area Mode',
                    type: 'pie', // 图表类型为饼图
                    radius: [25, 150], // raidus 控制饼状图的半径,参数一内圆,参数二外圆
                    center: ['50%', '50%'], // center 控制饼图的位置,参数一水平位置,参数二垂直位置
                    roseType: 'area', // roseType 控制饼图的显示模式,分为半径模式和面积模式
                    itemStyle: {
                        borderRadius: 15 // borderRadius 控制花瓣的圆角半径
                    },
                    data: [{
                            value: 30,
                            name: 'rose 1'
                        },
                        {
                            value: 28,
                            name: 'rose 2'
                        },
                        {
                            value: 26,
                            name: 'rose 3'
                        },
                        {
                            value: 24,
                            name: 'rose 4'
                        },
                        {
                            value: 22,
                            name: 'rose 5'
                        },
                        {
                            value: 20,
                            name: 'rose 6'
                        },
                        {
                            value: 18,
                            name: 'rose 7'
                        },
                        {
                            value: 16,
                            name: 'rose 8'
                        }
                    ]
                }]
            };
            myCharts.setOption(option)
        })
    </script>
</body>

</html>